<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-属性绑定指令</title>
<!--    导入vue的库文件 在 window 全局就有了 Vue 这个构造函数-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<!--    希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
<div id="app">
    <input type="text" v-bind:placeholder="tips">
    <hr>
<!--    vue规定 v-bind 指令 可以简写为 ： -->
    <img v-bind:src="photo" style="width: 150px">
    <hr>
    <img :src="photo" style="width: 150px">

    <hr>
    <div>1 + 2 的结果是：{{1 + 2}}</div>
    <di>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</di>
<!--    box是字符串 后面的index是变量 拼接  双引号里面写的js代码-->
    <div :title="'box' + index">这是一个div</div>

</div>

<script>
    //创建vue的实例对象
    const vm = new Vue({
    // el 属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
        el:'#app',
        // data 对象就是要渲染到页面上的数据
        data:{
            tips:'请输入用户名',
            photo:'https://cn.vuejs.org/images/logo.svg',
            index:3,
        }
    });
</script>
</body>
</html>